<nz-layout class="right-control">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)">
    <nz-form-item>
      <nz-form-label [nzSpan]="8" nzRequired>标题</nz-form-label>
      <nz-form-control [nzSpan]="6" nzHasFeedback>
        <input nz-input formControlName="userName" placeholder="请输入文章标题">
        <nz-form-explain *ngIf="validateForm.get('userName').dirty && validateForm.get('userName').errors || validateForm.get('userName').pending ">
          <ng-container *ngIf="validateForm.get('userName').hasError('required')">
            文章标题不能为空
          </ng-container>
<!--          <ng-container *ngIf="validateForm.get('userName').hasError('duplicated')">-->
<!--            The username is redundant!-->
<!--          </ng-container>-->
<!--          <ng-container *ngIf="validateForm.get('userName').pending">-->
<!--            Validating...-->
<!--          </ng-container>-->
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="flag=='article'">
      <nz-form-label [nzSpan]="8" nzRequired>分类</nz-form-label>
      <nz-form-control [nzSpan]="6" nzHasFeedback>
        <input nz-input formControlName="email" placeholder="请输入文章分类">
        <nz-form-explain *ngIf="validateForm.get('email').dirty&&validateForm.get('email').errors">
          <ng-container *ngIf="validateForm.get('email').hasError('required')">
            分类不能为空
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngIf="flag=='article'">
      <nz-form-label [nzSpan]="8" nzRequired>热门</nz-form-label>
      <div>
        <nz-form-control [nzSpan]="6" nzHasFeedback>
          <input nz-input  placeholder="是否热门" formControlName="password">
          <nz-form-explain *ngIf="validateForm.get('password').dirty&&validateForm.get('password').hasError('required')">是否热门</nz-form-explain>
        </nz-form-control>
      </div>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="8" nzRequired>概述</nz-form-label>
      <nz-form-control [nzSpan]="16" nzHasFeedback>
        <input nz-input  formControlName="confirm" placeholder="请输入文章概述">
        <nz-form-explain *ngIf="validateForm.get('confirm').dirty&&validateForm.get('confirm').errors">
          <ng-container *ngIf="validateForm.get('confirm').hasError('required')">
            概述不能为空
          </ng-container>
<!--          <ng-container *ngIf="validateForm.get('confirm').hasError('confirm')">-->
<!--            Password is inconsistent!-->
<!--          </ng-container>-->
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="8" nzRequired>详情</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <textarea formControlName="comment" nz-input rows="8" placeholder="请输入文章详情"></textarea>
        <nz-form-explain *ngIf="validateForm.get('comment').dirty&&validateForm.get('comment').hasError('required')">Please write something here!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzOffset]="8" [nzSpan]="12">
        <button nz-button nzType="primary" [disabled]="!validateForm.valid">提交</button>
<!--        <button nz-button (click)="resetForm($event)">Reset</button>-->
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-layout>
